<template>
  <div class="system">
    <div
      class="systemtop"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div class="header">
        <div class="headLeft">控制器</div>
        <div class="headRight">
          <span>时间：</span>
          <el-select v-model="timeGap" placeholder="请选择" class="headerItem">
            <el-option
              v-for="item in timeGapOptions"
              :key="item.value"
              v-bind="item"
            >
            </el-option>
          </el-select>
          <span>步长：</span>

          <el-select v-model="step" placeholder="请选择" class="headerItem">
            <el-option
              v-for="item in stepOptions"
              :key="item.value"
              v-bind="item"
            >
            </el-option>
          </el-select>
          <span>自动刷新：</span>

          <el-switch
            v-model="autoRefresh"
            class="headerItem"
            active-color="#13ce66"
            inactive-color="#aaa"
          >
          </el-switch>
          <span class="el-icon-refresh mtrefresh" @click="refreshClick">
            刷新</span
          >
        </div>
      </div>
      <div
        class="topcontent echart"
        v-useEchart="option"
        v-show="showType === 'map'"
      />
      <div class="topcontent table" v-show="showType === 'table'">
        <el-table
          :data="tableData"
          height="100%"
          border
          stripe
          style="width: 100%"
          header-row-class-name="tableHead"
        >
          <el-table-column
            v-for="(col, index) in column"
            :key="index"
            v-bind="col"
          />
        </el-table>
      </div>
    </div>
    <div class="systembottom">
      <div class="bottomleft">
        <div
          @click="selectedBtnClick(indey)"
          v-for="indey in 8"
          :key="indey"
          :class="{ selectedBtn: selectedBtnList.includes(indey) }"
        >
          {{ indey }}
        </div>
      </div>
      <div class="bottomright">
        <div
          class="map"
          :class="{ selected: showType === 'map' }"
          @click="showType = 'map'"
        >
          图
        </div>
        <div class="line"></div>
        <div
          class="table"
          :class="{ selected: showType === 'table' }"
          @click="showType = 'table'"
        >
          表
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
import { getSystemInfo } from "@/network/main/system/index";

export default {
  directives: {
    useEchart: {
      inserted(el, binding) {
        const { value } = binding;
        const Einstacte = echarts.init(el);
        if (value) {
          Einstacte.setOption(value);
        }
        el.Einstacte = Einstacte;
        window.addEventListener("resize", el.Einstacte.resize);
      },
      update(el, binding, Vnode) {
        const { value } = binding;
        console.log("指令更新");
        if (value) {
          el.Einstacte.setOption(value, true);
        }
        Vnode.context.$nextTick(() => {
          el.Einstacte.resize();
        });
      },
      unbind(el, binding) {
        el.Einstacte.dispose();
        window.removeEventListener("resize", el.Einstacte.resize);
      },
    },
  },
  data() {
    return {
      totalData: null,
      loading: false,
      autoInterval: null,
      autoRefresh: false,
      timeGap: 5 * 1000 * 60,
      step: 3 * 1000,
      showType: "table",
      selectedBtnList: [],
      tableCol: [],
      tableData: [
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      stepOptions: [
        {
          label: "3s",
          value: 3 * 1000,
        },
        {
          label: "5s",
          value: 5 * 1000,
        },
        {
          label: "10s",
          value: 10 * 1000,
        },
      ],
      timeGapOptions: [
        {
          label: "最近5分钟",
          value: 5 * 1000 * 60,
        },
        {
          label: "最近10分钟",
          value: 10 * 1000 * 60,
        },
        {
          label: "最近20分钟",
          value: 20 * 1000 * 60,
        },
      ],
      option: {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        xAxis: {
          type: "time",
        },
        yAxis: {
          type: "value",
        },
        series: [
          // {
          //   name: "Fake Data",
          //   type: "line",
          //   smooth: true,
          //   symbol: "none",
          //   lineStyle: {
          //     color: "blue",
          //   },
          //   zlevel: 1,
          //   z: 1,
          //   data: [
          //     [Date.now(), 1],
          //     [Date.now() + 60 * 1000 * 60, 2],
          //     [Date.now() + 60 * 1000 * 60 * 3, 3],
          //   ],
          // },
        ],
      },
    };
  },
  watch: {
    totalData() {
      this.updateChart();
    },
    selectedBtnList() {
      this.updateChart();
      this.updateTable();
    },
    step() {
      this.getSystemInfo();
      if (this.autoRefresh) {
        this.endInterval();
        this.startInterval();
      }
    },
    timeGap() {
      this.getSystemInfo();
    },
    autoRefresh(newVal) {
      if (newVal) {
        this.endInterval();
        this.startInterval();
      } else {
        this.endInterval();
      }
    },
  },
  computed: {
    column() {
      const defaultCol = {
        prop: "date",
        label: "时间",
        "min-width": "180",
        formatter: (row, column, cellValue, index) => {
          return moment(cellValue).format("hh:mm:ss");
        },
      };
      return this.tableCol.length
        ? [defaultCol, ...this.tableCol]
        : [defaultCol];
    },
  },
  methods: {
    updateTable() {
      const tableCol = this.selectedBtnList.map((selected) => {
        return {
          prop: `${selected}`,
          label: `${selected}端口`,
          "min-width": "180",
        };
      });
      this.tableCol = tableCol;
    },
    updateChart() {
      const lineData = this.selectedBtnList.map((selected) => {
        const selectedData = this.totalData.filter(
          ({ name }) => name === selected
        );
        return {
          name: `${selected}端口`,
          type: "line",
          smooth: true,
          symbol: "none",
          zlevel: selected,
          z: selected,
          data: selectedData[0].values,
        };
      });
      this.option.series = lineData;
      this.option = { ...this.option };
    },
    async refreshClick() {
      this.loading = true;
      await this.getSystemInfo();
      this.loading = false;
    },
    startInterval() {
      this.autoInterval = setInterval(this.getSystemInfo, this.step);
    },
    endInterval() {
      if (this.autoInterval) {
        clearInterval(this.autoInterval);
      }
    },
    getTimeRange() {
      const now = Date.now();
      return [now - this.timeGap, now];
    },
    async getSystemInfo() {
      const [start, end] = this.getTimeRange();
      const { result } = await getSystemInfo({
        start,
        end,
        step: this.step,
      });
      console.log(result);
      this.totalData = result;

      const timeData = this.totalData[0].values.map((item) => item[0]);
      const daya = timeData.map((time) => {
        this.totalData.map((total) => {
          const value = total.values.filter((value) => (value[0] = time))[0];
          return {
            date: time,
            [total.name]: value[1],
          };
        });
      });
      console.log("数据1112222", daya);
    },
    selectedBtnClick(indey) {
      const existIndex = this.selectedBtnList.indexOf(indey);
      if (existIndex !== -1) {
        this.selectedBtnList.splice(existIndex, 1);
      } else {
        this.selectedBtnList.push(indey);
      }
    },
  },
  mounted() {
    this.getSystemInfo();
  },
  destroyed() {
    this.endInterval();
  },
};
</script>

<style lang="stylus" scoped>
.system
  width calc(100% - 20px)
  height calc(100% - 20px)
  padding: 10px
  background-color #fff
  .systemtop
    height 70%
    width 100%
    background-color #fff
    .header
      padding 0 10px
      width calc( 100% - 20px)
      height: calc( 10% - 10px)
      margin-bottom 10px
      background-color #eee
      display: flex
      justify-content space-between
      align-items: center
      .headRight
        .mtrefresh
          cursor pointer
          color: #1d92ee
        .headerItem
          margin-right: 20px
          &:last-child
            margin-right: 0;
    .topcontent
      background-color #eee
      width 100%
      height 90%
  .systembottom
    margin-top: 10px
    height calc(30% - 10px)
    width 100%
    background-color #fff
    display: flex
    .bottomleft
      flex 7
      background-color #ddd
      padding: 50px
      display: flex
      justify-content: space-around
      align-items: center
      .selectedBtn
        background-color pink
      div
        cursor pointer
        user-select: none
        padding:  20px
        background-color #fff
        color #000
    .bottomright
      flex 1
      background-color #eee
      margin-left: 10px
      display: flex
      flex-direction: column
      justify-content: space-evenly
      align-items: center
      .map,.table
        padding: 50px
        background-color #aaa
        cursor pointer
        user-select none
      .line
        width 80%
        height 5px
        background-color #bbb
      .selected
        background-color: #abc
/deep/ .el-table th.el-table__cell
  background-color: #eee
/deep/ .el-select .el-input__inner
  text-align: center
</style>
